var vue = new Vue({
    el : '#app',
    data : {
        userTable:[],
        userForm:{
            current : 1,
            size : 10,
            total : 0,
        },
        selectedRoles: [],
        roleTable:[],
        roleQueryForm:{
            userId:0,
        },
        roleUserForm:{
            userId:0,
            roleIds:[],
        },
        loading: false,
    },
    created : function(){
        this.loadAllRole();
        this.loadAllUser();
    },
    methods : {
        loadAllRole: function () {
            var self = this;
            $.ajax({
                url:  constant.ROOT_SITE + '/system/role/list' ,
                success: function (result) {
                    if (result.code === 200) {
                        self.roleTable = result.body;
                    }
                }
            })
        },
        loadAllUser: function () {
            var self = this;
            $.ajax({
                url:  constant.ROOT_SITE + '/system/user/list' ,
                data: JSON.stringify(self.userForm),
                success: function (result) {
                    if (result.code === 200) {
                        self.userTable = result.body;
                        self.userForm.total = result.total;
                    }
                }
            })
        },
        onUserClick : function(user){
            this.roleQueryForm.userId = user.id;
            this.$refs.roleTable.clearSelection();

            var self = this;
            $.ajax({
                url:  constant.ROOT_SITE + '/system/roleuser/list/' + user.id,
                success: function (result) {
                    if (result.code === 200) {
                        for(let userRole of result.body){
                            for(let role of self.roleTable){
                                if(userRole.roleId === role.id){
                                    self.$refs.roleTable.toggleRowSelection(role);
                                    break;
                                }
                            }
                        }
                    }
                }
            })
        },
        onRoleSelect: function (role) {
            this.selectedRoles=role;
        },
        savePermission : function(){
           this.roleUserForm.userId = this.roleQueryForm.userId;
           let roleIds=[];
           for(let role of this.selectedRoles){
               roleIds.push(role.id);
           }
           this.roleUserForm.roleIds = roleIds;
            var self = this;
            $.ajax({
                url:  constant.ROOT_SITE + '/system/roleuser/save',
                data: JSON.stringify(self.roleUserForm),
                success: function (result) {
                    if (result.code === 200) {
                        self.$message({
                            type: 'success',
                            message: '保存成功！'
                        });
                    }else {
                        self.$message.error(result.errMsg);
                    }
                }
            })
        },
        onUserListSizeChange:function (pageSize) {
            this.userForm.size = pageSize;
            this.loadAllUser();
        },
        onUserListCurrentChange:function (pageCurrent) {
            this.userForm.current = pageCurrent;
            this.loadAllUser();
        },
    }
});